<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*word-break: break-all;
        word-wrap: break-word;*/
        input{
            margin: 0;
        }
        #div1{background-color: greenyellow;}
        #div1 input{display:inline;width:200px;height:40px;}
        #div2{background-color: blue;}

        #div3{background-color:darkgreen;}

        #div3 input{display:block;}
        #div4 span{line-height: 50px;width:100px;height:40px;}
    </style>
</head>
<body>
<h3>比较这3的区别，感受inline box的特点</h3>
<li>能让inline元素在同一行前后相连：</li>
<li>没法直接指明宽度width（奇怪这几个checkbox却可以指定！只能说是特例了）,height.但是却可以通过line-height来指明行高</li>
<li>无法指明margin-top,margin-bottom.但是盒子模型的其他几个参数都可以指定.</li>
<li>换行符会被当作空格占位显示</li>
</p>
<div id="div1">
<input style="display: inline" type="checkbox"  checked>
<input type="checkbox"  checked>
<input type="checkbox"  checked>
</div>
<div id="div2">
    <input type="checkbox"  checked
            ><input type="checkbox"  checked
        ><input type="checkbox"  checked>
</div>
<div id="div3">
    <input type="checkbox"  checked
            ><input type="checkbox"  checked
        ><input type="checkbox"  checked>
</div>
<div id="div4">
    <span>abc</span>
    <span>cde</span>
    <span>ddd</span>
</div>


<h3>line-height</h3>

</body>
</html>